<template>
	<view>
		<view class="box" v-for="message in messages">
			<view class="time">
				{{message.time}}
			</view>
			<view class="line left-line" v-if="message.position==='left'">
				<image class="avatar" :src="message.avatar" mode="aspectFill"></image>
				<view class="message left-message">
					{{message.content}}
				</view>
			</view>
			<view class="line right-line" v-else>
				<image class="avatar" :src="message.avatar" mode="aspectFill"></image>
				<view class="message right-message">
					{{message.content}}
				</view>

			</view>
		</view>

		<uv-tabbar>
			<view class="sendbar">
				<input class="sendbox" confirm-type="send" />
			</view>
		</uv-tabbar>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";

	let messages = [{
		avatar: "https://pic1.zhimg.com/v2-da2b0a3b96103d87a682409fc5a261a9_r.jpg?source=1def8aca",
		username: "张三",
		time: "18:33",
		position: "left",
		type: "text",
		content: "你好！"
	}, {
		avatar: "https://pic1.zhimg.com/v2-da2b0a3b96103d87a682409fc5a261a9_r.jpg?source=1def8aca",
		username: "张三",
		time: "18:34",
		position: "right",
		type: "text",
		content: "你好啊本次几次额外加覅降温为文件覅覅！"
	}];
</script>

<style lang="scss">
	.box {
		// display: flex;
		// justify-content: center;
		// align-items: center;
		margin-bottom: 20rpx;
	}

	.line {
		display: flex;
		// background: orange;
	}

	.time {
		// background: red;
		font-size: 32rpx;
		margin: 0 auto;
		text-align: center;
		color: #a0a0a0;
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin: 0 10rpx;
		flex-shrink: 0;
	}

	.message {
		margin: 10rpx;
		font-size: 40rpx;
		border-radius: 20rpx;
		padding: 10rpx;
	}

	.left-line {
		flex-direction: row;
		margin-right: 100rpx;
	}

	.left-message {
		background: #ffffff;
		margin-right: auto;
	}

	.right-line {
		flex-direction: row-reverse;
		margin-left: 100rpx;
	}

	.right-message {
		background: #E09AB5;
		margin-left: auto;
		display: flex;
		flex-wrap: wrap;
	}

	.sendbar {
		width: 100%;
		line-height: 100rpx;
		background: #f5f5f5;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.sendbox {
		margin: 20rpx;
		width: 90%;
		font-size: 40rpx;
		height: 90%;
		background: #fafafa;
	}

	page {
		background: #f0f0f0;
	}
</style>